iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
自我挑戰組

Vuex 學習筆記系列 第 18

[Vue.js] Vuex 學習筆記 (18) - 開發工具 Vue.js devtools

  • 分享至 

  • xImage
  •  

Vue.js devtools

Vue.js devtools 是一個在開發時很實用的 Chrome 套件,我們可以在裡面檢查組件的資料,也可以查看 Vuex 的事件與資料變化。

preview

安裝

使用方式也很簡單,我們使用 Chrome 開啟下面鏈接後安裝完即可使用
下載位置

在 Vuex 中使用

我們可以開啟 Chrome 的 Developer Tools 之後就可以在最上面的選單列看到 Vue 這個欄位,點擊後就可以使用了。

  1. Component 中我們可以查看組件的參數在操作中的變化,省去使用 console 的時間。
  2. Vuex 中的功能更是強大,每一個 mutation 呼叫時都會被記錄在其中,而點選其中的 mutation 時,還會顯示當下的數據,所以當要查看資料的變化時,是一個非常實用的功能。

demo


上一篇
[Vue.js] Vuex 學習筆記 (17) - 帳號登入 pluging
下一篇
[Vue.js] Vuex 學習筆記 (19) - 實用插件 plugin
系列文
Vuex 學習筆記20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言